<div class="tab-con tab-con-1">
	<div class="tab-group" id="dayTab">
		<div class="is-active" onclick="changeDayTab(this, 0)">7d</div>
		<div onclick="changeDayTab(this, 1)">30d</div>
	</div>
    <#if isUnlocked = true>
		<div class="data-wrap">
			<div class="data-table tb-7">
				<table class="tb-0">
					<thead>
					<tr>
						<th width="25%"></th>
						<th width="25%">Recent Posts</th>
						<th width="25%">Follower Growth</th>
						<th width="25%">Likes Growth</th>
					</tr>
					</thead>
					<tbody id="unlockData0">
					</tbody>
				</table>
			</div>
			<div class="data-table tb-30" style="display: none;">
				<table class="tb-0">
					<thead>
					<tr>
						<th width="25%"></th>
						<th width="25%">Recent Posts</th>
						<th width="25%">Follower Growth</th>
						<th width="25%">Likes Growth</th>
					</tr>
					</thead>
					<tbody id="unlockData2">
					</tbody>
				</table>
			</div>
			<div class="data-chart">
				<div class="chart-item">
					<div class="title">
						Daily Performance
						<div class="sub-title">
							<ul>
								<li class="is-active" onclick="changeDailySubTab(this, 0)">Growth</li>
								<li> |</li>
								<li onclick="changeDailySubTab(this, 2)">Total</li>
							</ul>
						</div>
					</div>
					<div class="chart-wrap">
						<aside>
							<ul id="dailyTab">
								<li class="is-active" onclick="changeChartTab(this, 0)">Followers</li>
								<li onclick="changeChartTab(this, 1)">Likes</li>
							</ul>
						</aside>
						<div class="chart-con" id="dailyChart"></div>
					</div>
				</div>
				<div class="chart-item">
					<div class="title">Recent Posts Performance</div>
					<div class="chart-wrap">
						<aside>
							<ul>
								<li class="is-active" onclick="changeChartTab(this, 0)">Views</li>
								<li onclick="changeChartTab(this, 1)">Likes</li>
								<li onclick="changeChartTab(this, 2)">Reviews</li>
								<li onclick="changeChartTab(this, 3)">Share</li>
							</ul>
						</aside>
						<div class="chart-con" id="postChart"></div>
					</div>
				</div>
			</div>
		</div>
    <#else>
		<div class="demo">
			<div class="data-wrap" id="data-exm">
				<div class="tips">
					<div class="title">
						Below is a sample report. Please unlock the report for more details.
					</div>
					<div>
                        <#if login == false>
							<a href="javascript:;" onclick="toLogin()">
								<button class="btn-info">Unlock Report</button>
							</a>
                        <#else>
							<button class="btn-info" onclick="checkUnlockPermission(1)">Unlock Report</button>
                        </#if>
					</div>
				</div>
				<div class="data-table tb-7">
					<table class="tb-0">
						<thead>
						<tr>
							<th width="25%"></th>
							<th width="25%">Recent Posts</th>
							<th width="25%">Follower Growth</th>
							<th width="25%">Likes Growth</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>Current period:</td>
							<td>
								<div class="data-item">
									<div>${weekExampleData.bloggerDataResponse.recentPosts}</div>
                                    <#if weekExampleData.bloggerDataResponse.percentPosts gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${weekExampleData.bloggerDataResponse.percentPosts}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
							<td>
								<div class="data-item">
									<div>
                                        <#assign recentFollowerGrowth=myController.getNumber(weekExampleData.bloggerDataResponse.recentFollowerGrowth)>
                                        ${recentFollowerGrowth}
									</div>
                                    <#if weekExampleData.bloggerDataResponse.percentFollowerGrowth gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${weekExampleData.bloggerDataResponse.percentFollowerGrowth}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
							<td>
								<div class="data-item">
									<div>
                                        <#assign recentLikesGrowth=myController.getNumber(weekExampleData.bloggerDataResponse.recentLikesGrowth)>
                                        ${recentLikesGrowth}
									</div>
                                    <#if weekExampleData.bloggerDataResponse.percentLikesGrowth gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${weekExampleData.bloggerDataResponse.percentLikesGrowth}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
						</tr>
						<tr>
							<td>Last period:</td>
							<td>
                                ${weekExampleData.bloggerDataResponse.lastPosts}
							</td>
							<td>
                                <#assign lastFollowerGrowth=myController.getNumber(weekExampleData.bloggerDataResponse.lastFollowerGrowth)>
                                ${lastFollowerGrowth}
							</td>
							<td>
                                <#assign lastViewGrowth=myController.getNumber(weekExampleData.bloggerDataResponse.lastViewGrowth)>
                                ${lastViewGrowth}
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div class="data-table tb-30" style="display: none;">
					<table class="tb-0">
						<thead>
						<tr>
							<th width="25%"></th>
							<th width="25%">Recent Posts</th>
							<th width="25%">Follower Growth</th>
							<th width="25%">Likes Growth</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td>Current period:</td>
							<td>
								<div class="data-item">
									<div>${monthExampleData.bloggerDataResponse.recentPosts}</div>
                                    <#if monthExampleData.bloggerDataResponse.percentPosts gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${monthExampleData.bloggerDataResponse.percentPosts}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
							<td>
								<div class="data-item">
									<div>
                                        <#assign recentFollowerGrowth=myController.getNumber(monthExampleData.bloggerDataResponse.recentFollowerGrowth)>
                                        ${recentFollowerGrowth}
									</div>
                                    <#if monthExampleData.bloggerDataResponse.percentFollowerGrowth gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${monthExampleData.bloggerDataResponse.percentFollowerGrowth}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
							<td>
								<div class="data-item">
									<div>
                                        <#assign recentLikesGrowth=myController.getNumber(monthExampleData.bloggerDataResponse.recentLikesGrowth)>
                                        ${recentLikesGrowth}
									</div>
                                    <#if monthExampleData.bloggerDataResponse.percentLikesGrowth gt 0>
									<div class="growth up">
                                        <#else>
										<div class="growth down">
                                            </#if>
                                            ${monthExampleData.bloggerDataResponse.percentLikesGrowth}%
											<span><i class="iconfont iconbofang-copy"></i></span>
										</div>
									</div>
							</td>
						</tr>
						<tr>
							<td>Last period:</td>
							<td>
                                ${monthExampleData.bloggerDataResponse.lastPosts}
							</td>
							<td>
                                <#assign lastFollowerGrowth=myController.getNumber(monthExampleData.bloggerDataResponse.lastFollowerGrowth)>
                                ${lastFollowerGrowth}
							</td>
							<td>
                                <#assign lastLikesGrowth=myController.getNumber(monthExampleData.bloggerDataResponse.lastLikesGrowth)>
                                ${lastLikesGrowth}
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div class="data-chart">
					<div class="chart-item">
						<div class="title">
							Daily Performance
							<div class="sub-title">
								<ul>
									<li class="is-active" onclick="changeDailySubTab(this, 0)">Growth</li>
									<li> |</li>
									<li onclick="changeDailySubTab(this, 2)">Total</li>
								</ul>
							</div>
						</div>
						<div class="chart-wrap">
							<aside>
								<ul id="dailyTab">
									<li class="is-active" onclick="changeChartTab(this, 0)">Followers</li>
									<li onclick="changeChartTab(this, 1)">Likes</li>
								</ul>
							</aside>
							<div class="chart-con" id="dailyChart"></div>
						</div>
					</div>
					<div class="chart-item">
						<div class="title">Recent Posts Performance</div>
						<div class="chart-wrap">
							<aside>
								<ul>
									<li class="is-active" onclick="changeChartTab(this, 0)">Views</li>
									<li onclick="changeChartTab(this, 1)">Likes</li>
									<li onclick="changeChartTab(this, 2)">Reviews</li>
									<li onclick="changeChartTab(this, 3)">Share</li>
								</ul>
							</aside>
							<div class="chart-con" id="postChart"></div>
						</div>
					</div>
				</div>
			</div>
			<img id="expImg" src="${contextPath}/static/img/keydata.png">
			<div class="overflow">
				<div class="overflow-title">Unlock to view more details.</div>
				<div class="btn-row">
					<button class="btn btn-default" onclick="showExp()">Show Example</button>
                    <#if login == false>
						<a href="javascript:;" onclick="toLogin()">
							<button class="btn-info">Unlock Report</button>
						</a>
                    <#else>
						<button class="btn-info" onclick="checkUnlockPermission(1)">Unlock Report</button>
                    </#if>
				</div>
			</div>
		</div>
    </#if>
</div>
